<template>
    <div class="footer">
        <ul>
            <li v-for="(nav, index) in nav_list" :key="index">{{nav.title}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "Footer",
    data() {
        return {
            nav_list: []
        }
    },
    methods: {
        get_bot_nav() {
            this.$axios.get(this.$settings.HOST + "home/bot/").then(response => {
                this.nav_list = response.data;
            })
        }
    },
    created() {
        this.get_bot_nav()
    }
}
</script>

<style scoped>
.footer {
    width: 100%;
    height: 128px;
    background: #25292e;
    color: #fff;
}

.footer ul {
    margin: 0 auto 16px;
    padding-top: 38px;
    width: 810px;
}

.footer ul li {
    float: left;
    width: 112px;
    margin: 0 10px;
    text-align: center;
    font-size: 14px;
}

.footer ul::after {
    content: "";
    display: block;
    clear: both;
}

.footer p {
    text-align: center;
    font-size: 12px;
}
</style>
